<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>学生作业</title>
<!-- 主题模式  -->
<link rel="stylesheet" href="public/css/journal.css" />
<link rel="stylesheet" href="public/css/text.css" />
<script src="public/js/jquery-1.8.0.js"></script>
<script type="text/javascript">
	//选择题的改变事件
	function answer(x) {
		var obj = x;
		var radionum = document.getElementsByName(obj);
		 check_val = [];
		for (var i = 0; i < radionum.length; i++) {
			var f=radionum[i].type;
			 if (f=="checkbox") {//如果循环出来的是checkbox则累加
				if (radionum[i].checked) {
					var r = radionum[i].dataset.id;
					  check_val.push(radionum[i].value);
					 var t= clear(check_val.toString());//将数组转换成字符串，再将字符串中的“，”给去掉
					  document.getElementById(r).value = t;
				}
			}else{ 
				if (radionum[i].checked) {
					var r = radionum[i].dataset.id;
					document.getElementById(r).value = radionum[i].value;
				}
			}
		}
	}
	//去掉数组中的逗号
	function clear(str) {
	    str = str.replace(/,/g, "");//取消字符串中出现的所有逗号
	    return str;
	}
	//判断题的改变事件
	function panduan(x) {
		var obj = x;
		var radionum = document.getElementsByName(obj);
		for (var i = 0; i < radionum.length; i++) {
			if (radionum[i].checked) {
				var r = radionum[i].dataset.id;
				document.getElementById(r).value = radionum[i].value;
			}
		}
	}
</script>
</head>
<body class="fatherdiv">
	<div class="nav">
					您好! 
					<a href="" class="">${userinfo.studentName}</a> 
					部门： <a>${classEntity.className}</a>
					 部门经理： <a>${monitor.studentName}</a> 
					 学分：
					<a href="javascript:loadXxx('stu/myscore.jsp')">[${userinfo.totalCredits}分]</a> 
					<a target="" class="" href="">[查看课表]</a> 
					<a id="qiantaipass" class="" href="qt-user-updatepass">[修改密码]</a> 
					<a class="" href="logout" onclick="return confirm('确定退出？')">[注销]</a>
	</div>
	<ul class="nav_head">
		<li>
			<div>
				<img src="public/images/xuexi.png" /> <a href="qiantai">快乐学习</a>
			</div>
		</li>
		<li>
			<div>
				<img src="public/images/quxian.png" /> <a href="qt-assessment">学习评估</a>
			</div>
		</li>
			<!-- <li>
			<div>
				<img src="public/images/rongyu.png" /> <a href="qt-my-honor">我的荣誉</a>
			</div>
		</li> 
		<li>
			<div>
				<img src="public/images/rizhi.png" /> <a
					href="qt-journal-recommend">教学日志</a>
			</div>
		</li>-->
		<li>
			<div>
				<img src="public/images/jihua.png" /> <a
					href="qt-learnplan-list?id=${userinfo.stuId}">学习计划</a>
			</div>
		</li>
		<li>
			<div>
				<img src="public/images/tuadui.png" /> <a
					href="qt-team-list?id=${userinfo.stuId}">项目团队</a>
			</div>
		</li>
		<li>
			<div>
					<img src="public/images/jiuye.png" /> <a
						href="chaxuijingyan?id=-1">就业资讯</a>
				</div>
		</li>
	</ul>
	<!--头部上-->
	<br>
	<br>
	<input type="hidden" id="studentId" value="${studentId }">
	<input type="hidden" id="zuoyeId" value="${zuoYe.zuoyeId }">
 	<h1 style="font: 20px; margin-left: 20px">${className}-${zuoYe.zuoyeName}</h1>
	<div class="content_button">
		<div class="content_button_one">
			<h1 style="font-size: 15px; margin-top: 15px; margin-left: 20px;">一、选择题</h1>
			<div style="margin-left: 40px; margin-top: 10px;">
				<c:forEach items="${title1 }" var="title1" varStatus="state">
					<div>${state.index+1 }、${title1.title }<input value="${title1.titleType=='无'?'':title1.titleType }"
							id="timu${state.index+1 }" name="answer" data-id="${title1.titleId }" readonly="readonly"
							style="outline: none; border-left: none; border-top: none; border-right: none; border-bottom: 1px solid #CCC; height: 20px; width: 40px; padding-left: 20px; margin-left: 10px;">
					</div>
						<c:if test="${title1.imageId!=null }">
							 <div style="margin-left: 2%;margin-top: 1px;">
								<span style="color: black;"> 效果如图所示：</span><br>
								<img style="width: 15%;height: 5%;margin-left: 2%;margin-top: 5px;" alt="" src="upload/${title1.imageId.imagePath }">
							</div>
						</c:if> 
					<div>
						<div style="margin-left: 25px; margin-top: 5px;">
							<label> 
							<c:if test="${fn:length(title1.titleAnswer)>1 }">
								<input type="checkbox" value="A" data-id="timu${state.index+1 }" onclick='answer("option${title1.titleId }")'
									name="option${title1.titleId }" ${title1.titleType=='A'?'checked':'' } >
							</c:if>
							<c:if test="${fn:length(title1.titleAnswer)==1 }">
								<input type="radio" value="A" data-id="timu${state.index+1 }" onclick='answer("option${title1.titleId }")'
									name="option${title1.titleId }"  ${ title1.titleType=='A'?'checked':'' } >
							</c:if>
								A、${title1.optionA }
							</label>
						</div>
						<div style="margin-left: 25px; margin-top: 5px;">
							<label>
							<c:if test="${fn:length(title1.titleAnswer)>1 }">
								<input type="checkbox" value="B" data-id="timu${state.index+1 }" onclick='answer("option${title1.titleId }")'
									name="option${title1.titleId }"  ${title1.titleType=='B'?'checked':'' }  >
							</c:if>
							<c:if test="${fn:length(title1.titleAnswer)==1 }">
								<input type="radio" value="B" data-id="timu${state.index+1 }" onclick='answer("option${title1.titleId }")'
									name="option${title1.titleId }"   ${title1.titleType=='B'?'checked':'' } >
							</c:if>
								B、${title1.optionB }
							</label>
						</div>
						<div style="margin-left: 25px; margin-top: 5px;">
							<label> 
							<c:if test="${fn:length(title1.titleAnswer)>1 }">
								<input type="checkbox" value="C" data-id="timu${state.index+1 }" onclick='answer("option${title1.titleId }")'
									name="option${title1.titleId }"   ${title1.titleType=='C'?'checked':'' } >
							</c:if>
							<c:if test="${fn:length(title1.titleAnswer)==1 }">
								<input type="radio" value="C" data-id="timu${state.index+1 }" onclick='answer("option${title1.titleId }")'
									name="option${title1.titleId }"  ${title1.titleType=='C'?'checked':'' }  >
							</c:if>
									C、${title1.optionC }
							</label>
						</div>
						<div style="margin-left: 25px; margin-top: 5px;">
						<input type="hidden" value="${title1.titleAnswer}">
							<label> 
								<c:if test="${fn:length(title1.titleAnswer)>1 }">
									<input type="checkbox" value="D" data-id="timu${state.index+1 }" onclick='answer("option${title1.titleId }")'
									name="option${title1.titleId }"  ${title1.titleType=='D'?'checked':'' } >
								</c:if>
								<c:if test="${fn:length(title1.titleAnswer)==1 }">
									<input type="radio" value="D" data-id="timu${state.index+1 }" onclick='answer("option${title1.titleId }")'
										name="option${title1.titleId }"  ${title1.titleType=='D'?'checked':'' } >
								</c:if>
									D、${title1.optionD }
							</label>
						</div>
					</div>
					<br />
					</c:forEach>
			</div>
		</div>
	</div>
	<!--判断题-->
	<div class="content_button_two">
		<h1 style="font-size: 15px; margin-top: 15px; margin-left: 20px;">二、判断题</h1>
		<div style="margin-left: 55px; margin-top: 5px;">
			<c:forEach items="${title2 }" var="title2" varStatus="state">
				<div>${state.index+1 }、
					<label>																						 
						<input type="radio" data-id="panduan${state.index+1}" onclick='panduan("panduan${title2.titleId }")'
							name="panduan${title2.titleId }"  value="对" ${title2.titleType=='对'?'checked':'' }>对
					</label>
					<label>
						 <input type="radio" data-id="panduan${state.index+1}" onclick='panduan("panduan${title2.titleId }")'
						    name="panduan${title2.titleId }" value="错"  ${title2.titleType=='错'?'checked':'' } >错
					</label>
					&nbsp;&nbsp;&nbsp;&nbsp;${title2.title }&nbsp;
					<input type="hidden" id="panduan${state.index+1 }" value="${title2.titleAnswer=='无'?'':title2.titleAnswer }" name="panduan" readonly="readonly" data-id="${title2.titleId }">
				</div>
			</c:forEach>
		</div>
	</div>
	<!--代码题-->
	<div class="content_button_three">
		<h1 style="font-size: 15px; margin-top: 15px; margin-left: 20px;">三、代码题</h1>
		<ol type="1">
			<c:forEach items="${title3 }" var="title3" varStatus="state">
				<li>
					<div style="margin-bottom: 15px; margin-left: 15px;">${state.index+1 }、${title3.title }
					 <c:if test="${title3.imageId!=null }">
						 <div style="margin-left: 2%;margin-top: 1px;">
								<span style="color: black;"> 效果如图所示：</span><br>
								<img style="width: 15%;height: 5%;margin-left: 2%;margin-top: 5px;" alt="" src="upload/${title3.imageId.imagePath }">
						</div>
					</c:if> 
					</div>
					
					 <textarea style="margin-left: 50px;" rows="20" cols="100"  data-id="${title3.titleId }"
						name="daima">
						${title3.titleType=='无'?'':title3.titleType }
							</textarea>
				</li>
			</c:forEach>
		</ol>
	</div>
	<button id="save"
		style="float: left; margin: 20px 0px 0px 30px; height: 30px; width: 90px;" onclick="return confirm('确定保存吗？')">保存</button>
	<button id="conmit"
		style="float: right; margin: 20px 30px 15px 0px; height: 30px; width: 90px;"onclick="return confirm('确定提交吗？')">提交</button>
	<!--底部下-->
	<div class="home_page_bottom">
		<div class="botton_left">
			<img style="height: 50px; margin-left: 10px;"
				src="public/images/downloadlog.png" />
		</div>
		<div class="botton_right">
			<div>
				?2017 <a style="color: gray;">中科韬睿</a> 版权所有 版本 Ver 1.1.8
			</div>
			<div>研发部技术总监 李赞红 郭华</div>
			<div>电话 18573308384 18673363711</div>
		</div>
	</div>
	<script type="text/javascript">
	$(function(){
		//保存按钮的点击事件
			$("#save").click(function(){
				var studentId=$("#studentId").val();//获取学生编号
				var zuoyeId=$("#zuoyeId").val();//取作业编号
				 $('input[name="answer"]').each(function(){
				 	var titleId = $(this).data('id');//获取data-id的值以便与来赋值
				 	var answer=$(this).val();
				 	if (answer==null||answer=="") {
				 		answer="空";
					}else{
						$.get("zuoye/savezuoye/" +titleId+"/"+studentId+"/"+zuoyeId+"/"+answer, function(rs) {
							if (rs.success) {
							} else {
								 alert("提示", "网络开了点小差，出问题了哟~");
							}
						});
					}
			});
			
			$('input[name="panduan"]').each(function(){
			 	var titleId = $(this).data('id');//获取data-id的值以便与来赋值
			 	var answer=$(this).val();
			 	if (answer==null||answer=="") {
			 		answer="空";
				}else{
					$.get("zuoye/savezuoye/" +titleId+"/"+studentId+"/"+zuoyeId+"/"+answer, function(rs) {
						if (rs.success) {
						} else {
							 alert("提示", "网络开了点小差，出问题了哟~");
						}
					});
				}
			}); 
			$('textarea[name="daima"]').each(function(){
			 	var titleId = $(this).data('id');//获取data-id的值以便与来赋值
			 	var answer=$(this).val();
			 	if (answer==null||answer=="") {
			 		answer="空";
				}else{
					$.get("zuoye/savezuoye/" +titleId+"/"+studentId+"/"+zuoyeId+"/"+answer, function(rs) {
						if (rs.success) {
						} else {
							alert("提示", "网络开了点小差，出问题了哟~");
						}
					});
				}
			});
			window.location.href = 'zuoye-success';
		});
		//=============================================================================================
			//提交按钮的点击事件
			$("#conmit").click(function(){
				var studentId=$("#studentId").val();//获取学生编号
				var zuoyeId=$("#zuoyeId").val();//取作业编号
				 $('input[name="answer"]').each(function(){
				 	var titleId = $(this).data('id');//获取data-id的值以便与来赋值
				 	var answer=$(this).val();
				 	if (answer==null||answer=="") {
				 		answer="空";
					}else{
						$.get("zuoye/jiaozuoye/" +titleId+"/"+studentId+"/"+zuoyeId+"/"+answer, function(rs) {
							if (rs.success) {
							} else {
								 alert("提示", "网络开了点小差，出问题了哟~");
							}
						});
					}
			});
			
			$('input[name="panduan"]').each(function(){
			 	var titleId = $(this).data('id');//获取data-id的值以便与来赋值
			 	var answer=$(this).val();
			 	if (answer==null||answer=="") {
			 		answer="空";
				}else{
					$.get("zuoye/jiaozuoye/" +titleId+"/"+studentId+"/"+zuoyeId+"/"+answer, function(rs) {
						if (rs.success) {
						} else {
							 alert("提示", "网络开了点小差，出问题了哟~");
						}
					});
				}
			}); 
			$('textarea[name="daima"]').each(function(){
			 	var titleId = $(this).data('id');//获取data-id的值以便与来赋值
			 	var answer=$(this).val();
			 	if (answer==null||answer=="") {
			 		answer="空";
				}else{
					$.get("zuoye/jiaozuoye/" +titleId+"/"+studentId+"/"+zuoyeId+"/"+answer, function(rs) {
						if (rs.success) {
						} else {
							alert("提示", "网络开了点小差，出问题了哟~");
						}
					});
				}
			});
			window.location.href = 'zuoye-success';
		});
	});
	</script>
</body>
</html>